<template>

    <view class="container">
        <!-- 会员卡图片区域 -->
        <view class="card-container">
            <image 
                class="membership-card" 
                src="/static/huiyuanImg/black.png" 
                mode="aspectFill"
                lazy-load
            ></image>
           
        </view>
        
        <!-- 优惠条款区域 -->
        <view class="terms-container">
            <view class="section-title">
                <text>会员专享优惠</text>
            </view>
            
            <view class="benefits-list">
                <view class="benefit-item" v-for="(item, index) in benefits" :key="index">
                    <view class="benefit-icon">
                       <image src="/static/huiyuanImg/点.png"></image>
                    </view>
                    <view class="benefit-content">
                        <text class="benefit-title">{{ item.title }}</text>
                        <text class="benefit-desc">{{ item.desc }}</text>
                    </view>
                </view>
            </view>
            
          
            
        </view>
        
     
    </view>
</template>

<script>
export default {
    data() {
        return {
            benefits: [
                { title: "购物折扣", desc: "会员专享9.5折优惠" ,
				},
                { title: "积分奖励", desc: "赠送5000积分，消费1元累计10积分，积分可兑换精美礼品",
				 },
       
                { title: "优先购买", desc: "新品上市提前购，限量商品优先预约",
				 },
            
            ],
           
            showModal: false
        }
    },
    methods: {
     
    }
}
</script>

<style>
.container {
    padding: 20px;
    background-color: #F5F7FA;
    /* min-height: 100vh; */
}

.card-container {
    position: relative;
    height: 200px;
    border-radius: 16px;
    overflow: hidden;
    margin-bottom: 24px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
}

.membership-card {
    width: 100%;
    height: 100%;
}

.card-info {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 16px;
    background: linear-gradient(to top, rgba(0, 0, 0, 0.7), transparent);
}

.card-title {
    color: #FFFFFF;
    font-size: 18px;
    font-weight: bold;
    display: block;
    margin-bottom: 4px;
}

.card-id {
    color: rgba(255, 255, 255, 0.8);
    font-size: 14px;
    display: block;
}

.terms-container {
    background-color: #FFFFFF;
    border-radius: 16px;
    padding: 20px;
}

.section-title {
    margin-bottom: 16px;
}

.section-title text {
    font-size: 16px;
    font-weight: bold;
    color: #4E5969;
    position: relative;
    padding-left: 12px;
}

.section-title text::before {
    content: "";
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 4px;
    height: 16px;
    background-color: #165DFF;
    border-radius: 2px;
}

.benefits-list {
    margin-bottom: 24px;
}

.benefit-item {
    display: flex;
    align-items: center;
    padding: 12px 0;
    border-bottom: 1px solid #F2F3F5;
}

.benefit-item:last-child {
    border-bottom: none;
}

.benefit-icon {
    width: 10px;
    height: 10px;
    background-color: #E8F3FF;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-right: 12px;
}

.benefit-icon image {
  width: 100%;
  height: 100%;
}

.benefit-content {
    flex: 1;
}

.benefit-title {
    font-size: 14px;
    font-weight: 500;
    color: #4E5969;
    display: block;
    margin-bottom: 4px;
}

.benefit-desc {
    font-size: 12px;
    color: #86909C;
    display: block;
}

.terms-content {
    margin-bottom: 24px;
}

.term-item {
    font-size: 12px;
    color: #86909C;
    display: block;
    margin-bottom: 8px;
    line-height: 1.6;
}

.btn-primary {
    height: 44px;
    background-color: #165DFF;
    color: #FFFFFF;
    font-size: 16px;
    font-weight: 500;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
}

.btn-icon {
    margin-right: 8px;
}

.mt-4 {
    margin-top: 16px;
}

.mt-6 {
    margin-top: 24px;
}

.modal-mask {
    position: fixed;
    z-index: 9998;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
    display: flex;
    align-items: center;
    justify-content: center;
}

.modal-container {
    width: 85%;
    background-color: #FFFFFF;
    border-radius: 16px;
    overflow: hidden;
}

.modal-header {
    padding: 16px 20px;
    border-bottom: 1px solid #F2F3F5;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.modal-title {
    font-size: 16px;
    font-weight: bold;
    color: #4E5969;
}

.close-btn {
    font-size: 20px;
    color: #86909C;
}

.share-options {
    padding: 24px 16px;
    display: flex;
    flex-wrap: wrap;
}

.share-option {
    width: 20%;
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-bottom: 16px;
}

.share-icon {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    margin-bottom: 8px;
}

.share-text {
    font-size: 12px;
    color: #4E5969;
}

.modal-footer {
    padding: 12px 20px;
    border-top: 1px solid #F2F3F5;
}

.cancel-btn {
    width: 100%;
    height: 40px;
    background-color: #FFFFFF;
    color: #4E5969;
    font-size: 14px;
    font-weight: 500;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
}
</style>
</template>
    